<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta content="IE=edge" http-equiv="X-UA-Compatible">
  <meta content="width=device-width, initial-scale=1.0" name="viewport">
  <title>初识canvas</title>
  <style>
    #cs {
      background-color: aquamarine;
    }
  </style>
</head>

<body>
  <canvas height="300" id="cs" width="400"></canvas>

</body>
<script>
  let cs = document.querySelector('#cs')
  let ctx = cs.getContext('2d') // 画笔
  // 绘制矩形
  ctx.fillRect(100, 100, 100, 100)
  // 画一个笑脸
  ctx.beginPath()
  // arc参数：圆心x,圆心y,半径，开始角度，结束角度，默认顺时针方向（counterclockwise(逆时针):false）
  ctx.arc(150, 150, 30, 0, Math.PI * 2, false)
  ctx.closePath()
  ctx.lineWidth = 4   // 画笔线条宽度
  ctx.strokeStyle = '#fff'  //笔触的颜色
  ctx.stroke()
  ctx.fillStyle = 'red'  // 填充绘画的颜色
  ctx.fill()


</script>

</html>